<template>
  <div>
    <ul>
      <li v-for="(news, index) in top10News" :key="news.id">
        <a
          :href="'/#/News/' + news.id"
          :ref="index % 5 == 0 ? 'pointNews' : 'commonNews'"
          :class="{ pointNews: index % 5 == 0 }"
        >
          <span :class="{ pointNews: index % 5 == 0 }">{{ index + 1 }}、</span>
          {{ news.title }}</a
        >
      </li>
    </ul>
  </div>
</template>

<style scoped>
.pointNews {
  font-size: x-large;
  font-weight: 600;
  /* 样式控制：只能取一行的数据 */
}
li {
  list-style: none;
  margin-bottom: 10px;
}
a {
  text-decoration: none;
  padding: 0%;
  margin: 0%;
  color: #000;
  font-size: medium;
  display: inline-block;
  margin-bottom: 15px;
  font-size: large;
}
a:hover {
  color: rgb(191, 64, 56);
}
ul {
  padding: 0%;
  margin: 0%;
}
</style>

<script>
export default {
  props: {
    top10News: {
      type: Array,
      required: true,
    },
  },
  updated() {
    //   console.log(this.$refs.pointNews);
      // 仅在整个视图都被渲染之后才会运行的代码
      this.formatData(this.$refs.pointNews, 16);
      this.formatData(this.$refs.commonNews, 21);
  },
  methods: {
    formatData(dataArray, length) {
      for (var i = 0; i < dataArray.length; i++) {
        //   console.log('1');
        if (dataArray[i].innerText.length > length) {
          dataArray[i].innerText =
            dataArray[i].innerText.slice(0, length) + "...";
        }
      }
    },
  },
};
</script>